<template>
  <div class="message">
    <div class="message-left">
      <ul>
        <li>姓名：{{ userInfo.name }}</li>
        <li>年龄：{{ userInfo.age }}</li>
        <li>性别：{{ userInfo.gender }}</li>
        <li>学校：{{ userInfo.school }}</li>
      </ul>
    </div>
    <div class="message-right">
      <h2>信息修改</h2>
      姓名:<input type="text" v-model="editInfo.name" /> 年龄:<input
        type="text"
        v-model="editInfo.age"
      />
      性别:<input type="text" v-model="editInfo.gender" /> 学校:<input
        type="text"
        v-model="editInfo.school"
      />
      <button @click="save">保存</button>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from "vuex";
export default {
  name: "message",
  data() {
    return {
      editInfo: {
        name: "",
        age: "",
        gender: null,
        school: ""
      }
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.work.userInfo,
    })
  },
  methods: {
    ...mapMutations(["updateUserInfo"]),
    save() {
      const info = this.editInfo;
      if (info && info.name && info.age && info.gender && info.school) {
        this.updateUserInfo(JSON.parse(JSON.stringify(this.editInfo)));
      }
    }
  }
};
</script>
<style lang="scss">
.message {
  .message-left {
    width: 290px;
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    text-decoration: row;
    background-color: rgb(99, 99, 167);
    li {
      list-style: none;
      font-size: 30px;
    }
  }
  .message-right {
    position: fixed;
    left: 300px;
    top: 0;
    right: 0;
    bottom: 0;
    input {
      display: block;
    }
  }
}
</style>